<template>
  <div class="product-list-component">
    <ul class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
        @click="$router.push(`/product/detail/${item.id}`)"
      >
        <div class="image" v-if="item.mainImage && item.mainImage.thumbnail_path">
          <img v-lazy="item.mainImage.thumbnail_path" />
        </div>
        <div class="title two-lines">{{ item.title }}</div>
        <div  class="score-cost" v-if="getArea(item)">
          <span>{{+item.price}}积分</span>
        </div>
        <price :price="+item.price" :old-price="+item.price_old" class="price" v-else />
<!--        <div class="score-cost" v-if="item.scoreCost && item.scoreCost.total">-->
<!--          店主特权: <span>{{ +item.price }}元</span> + ￥{{ +item.scoreCost.total }}元全国包邮快递费-->
<!--        </div>-->
      </li>
    </ul>
  </div>
</template>

<script>
import Price from '@/components/Price'
export default {
  name: 'ProductList',
  props: ['list'],
  components: {
    Price
  },
  methods: {
    getArea(item) {
      const id = item.area && item.area[0] && +item.area[0].area_id
      console.log(id)
      return id === 2
    }
  },
  updated() {
    // console.log(this.list)
  }
}
</script>

<style scoped lang="stylus">
.product-list-component
  .list
    margin 10px
    display flex
    flex-wrap wrap
    justify-content space-between
    .list-item
      padding 10px
      border-radius 10px
      background white
      margin-bottom 10px
      width calc(50% - 5px)
      box-sizing border-box
      .image
        padding 10px
      .title
        font-weight 700
        font-size 16px
        line-height 22px
        text-align left
      .price
        text-align left
      .score-cost
        //height 35px
        //line-height 35px
        line-height 20px
        text-align left
        span
          color red
          font-weight 700
          font-size 16px
</style>
